<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>


        /*  这里控制的是两个 btn  按钮 */
        .btn {
            background-color: #2196F3;
            color: white;
            padding: 16px;
            font-size: 26px;
            border: none;
            outline: none;
        }

        .dropdown {
            position: absolute;
            display: inline-block;
        }

        .dropdown-content {
            /* 默认隐藏  */
            display: none;  
            position: absolute;
            background-color: #f1f1f1;
            min-width: 160px;
            z-index: 1;
        }

        .dropdown-content a {
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
        }

        .dropdown-content a:hover {
            background-color: #ddd
        }

        .dropdown:hover .dropdown-content {
            display: block;
        }

        .btn:hover,
        .dropdown:hover .btn {
            background-color: #0b7dda;
        }
    </style>
</head>

<body>

    <h2>Split Button Dropdowns</h2>
    <p>Move the mouse over the arrow icon to open the dropdown menu.</p>

    <button class="btn">submit</button>
    <div class="dropdown">
        <button class="btn" style="border-left:1px solid red">
            <i class="fa fa-caret-down"></i>
        </button>
        <div class="dropdown-content">
            <a href="#">Link 1</a>
            <a href="#">Link 2</a>
            <a href="#">Link 3</a>
        </div>
    </div>

    <xmp style="font-size: 22px; font-weight: bolder;  margin-bottom: 66px;  color: black;  font-family: '微软雅黑';">

        必知必会

        <button class="btn">submit</button>
        <div class="dropdown">
            <button class="btn" style="border-left:1px solid red">
                <i class="fa fa-caret-down"></i>
            </button>
            <div class="dropdown-content">
                <a href="#">Link 1</a>
                <a href="#">Link 2</a>
                <a href="#">Link 3</a>
            </div>
        </div>


        这里控制的是两个 btn  按钮
        用的是字体 
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

        .btn {
            background-color: #2196F3;
            color: white;
            padding: 16px;
            font-size: 26px;
            border: none;
            outline: none;
        }

        .dropdown:hover .dropdown-content {
            display: block;
        }
    </xmp>

</body>

</html>